<template>
  <div class="main" v-if="isShow">
    <main-header></main-header>
    <main-content></main-content>
    <main-footer class="footer"></main-footer>
    <bottom-nav class="bottom"></bottom-nav>
  </div>
</template>

<script>
import bottomNav from "../components/bottom-nav.vue";
import mainHeader from "../components/main-header";
import mainContent from "../components/main-content.vue";
import mainFooter from "../components/main-footer.vue";
export default {
  components: { mainHeader, mainContent, mainFooter, bottomNav },
  data() {
    return { isShow: false };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        //获取头部底部数据

        const [nav, webSearch] = await Promise.all([
          this.$request.get("/khcommon/navigation"),
          this.$request.get("/khcommon/webSearch"),
        ]);
        //关键词设置
        let head = document.getElementsByTagName("head");
        let meta = document.createElement("meta");

        document
          .querySelector('meta[name="keywords"]')
          .setAttribute("content", webSearch.data?.keywords);
        document
          .querySelector('meta[name="description"]')
          .setAttribute("content", webSearch.data?.description);

        //meta.content = to.meta.content;
        head[0].appendChild(meta);
        document.title = webSearch.data?.webname;
        //保存菜单到本地
        localStorage.setItem("nav", JSON.stringify(nav.data));
        localStorage.setItem("webSearch", JSON.stringify(webSearch.data));

        this.$store.commit("common/setNav", nav.data);
        this.$store.commit("common/setWebinfo", webSearch.data);

        this.isShow = true;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .bottom {
    display: none;
  }

  .footer {
    margin-bottom: 0;
  }

  @media screen and (max-width: 1200px) {
    .bottom {
      width: 100%;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .footer {
      margin-bottom: fn.rpx(102);
    }
  }
}
</style>